<template>
    <el-dialog :model-value="props.visible" title="查看付款凭证" @close="handleClose">
        <div>
            <el-carousel :autoplay="false" height="500px">
                <el-carousel-item v-for="item in proofs" :key="item">
                    <el-image class="proof-image" :src="item" fit="fill" ></el-image>
                </el-carousel-item>
            </el-carousel>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button  type="primary" @click="handleClose" >确 定</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">

const props = defineProps<{
    visible: boolean,
}>();
const emits = defineEmits(['close']);

const proofs = ref<any[]>([
    'http://62.234.191.130:9000/dev/2024/12/26/10835462a0c84bce90f72f4ecdb13bd2.JPG',
    'http://62.234.191.130:9000/dev/2024/12/26/613176b785034f118393fc7ecd13f657.JPG'
])

const handleClose = () => {
    emits('close');
};
</script>

<style lang="scss" scoped>

.proof-image{
    width: 100%;
    height: 500px;
}
</style>